<template>
    <div>
      <el-container :style="{height:height}">
<!--        头部-->
        <el-header>
          <div style="height:100%;display: flex;align-items: center;">
            <img src="../assets/tx.jpg" style="width: 40px" alt="">
            <span style="margin-left: 15px">电商后台管理系统</span>
          </div>
          <el-button type="info" @click="logout">退出</el-button>
        </el-header>
<!--        主体-->
        <el-container :style="{height:height}">
<!--          侧边栏-->
          <el-aside :width="isCollapse?'64px':'201px'">
            <div class="toggle" @click="toggle" >{{isCollapse?"展开":"关闭"}}</div>
            <el-menu class="el-menu-vertical-demo" style="background-color: #F6F6F6" :style="{height:height}" :collapse="isCollapse" :unique-opened="true" :collapse-transition="false" router>
              <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id" style="background-color: #F6F6F6">
                <template slot="title">
                  <i :class="iconObj[item.id]"></i>
                  <span>{{item.authName}}</span>
                </template>
                <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" style="background-color: #F6F6F6">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{ subItem.authName }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
<!--          内容主体-->
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
export default {
  name: "home",
  data(){
    return{
      height:'',
      menuList:[],
      isCollapse:false,//是否折叠侧边栏
      iconObj:{
        '125':'iconfont icon-yonghu',
        '103':'iconfont icon-quanxian',
        '101':'iconfont icon-shangpingouwudai2',
        '102':'iconfont icon-dingdan',
        '145':'iconfont icon-shujutongji',
      }
    }
  },
  created() {
    this.getMenuList();
  },
  mounted() {
    // 获取屏幕高度
    this.height = document.documentElement.clientHeight-62+'px';
  },
  methods:{
    toggle(){
        this.isCollapse = !this.isCollapse
    },
    logout(){
      window.sessionStorage.clear();
      this.$router.push('/login')
    },
    //获取菜单列表
    async getMenuList(){
      const {data:res} = await this.$shop.get('menus')
      if(res.meta.status !==200) return this.$message.error(res.meta.msg);
      this.menuList = res.data
    }
  },
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-header{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  font-size: 20px;
  background-color: #F6F6F6;
}
.toggle{
  display: flex;
  justify-content: center;
  background-color: #f6f6f6;
}
</style>
